<template>
  <div class="network-legend" :class="{ collapsed: isCollapsed }">
    <!-- 折叠/展开按钮 -->
    <div class="legend-header" @click="toggleCollapse">
      <h3 class="legend-title">
        <i class="icon-legend"></i>
        节点类型图例
      </h3>
      <button class="collapse-btn" :class="{ rotated: isCollapsed }">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
          <path d="M8 1l7 7-7 7V1z"/>
        </svg>
      </button>
    </div>
    
    <!-- 图例内容 -->
    <div class="legend-content" v-show="!isCollapsed">
      <div class="legend-stats">
        <div class="stats-item">
          <span class="stats-label">节点总数:</span>
          <span class="stats-value">{{ nodeCount }}</span>
        </div>
        <div class="stats-item">
          <span class="stats-label">边数量:</span>
          <span class="stats-value">{{ edgeCount }}</span>
        </div>
      </div>
      
      <div class="legend-items">
        <div 
          v-for="(typeInfo, index) in nodeTypes" 
          :key="typeInfo.type"
          class="legend-item"
          :class="{ 
            highlighted: highlightedTypes.includes(typeInfo.type),
            dimmed: highlightedTypes.length > 0 && !highlightedTypes.includes(typeInfo.type)
          }"
          @click="toggleHighlight(typeInfo.type)"
          @mouseenter="onTypeHover(typeInfo.type, true)"
          @mouseleave="onTypeHover(typeInfo.type, false)"
        >
          <div 
            class="color-indicator" 
            :style="{ backgroundColor: typeInfo.color }"
          ></div>
          <div class="type-info">
            <span class="type-name">{{ typeInfo.type }}</span>
            <span class="type-count">({{ typeInfo.count }})</span>
          </div>
          <div class="type-percentage">
            {{ ((typeInfo.count / nodeCount) * 100).toFixed(1) }}%
          </div>
        </div>
      </div>
      
      <!-- 控制按钮 -->
      <div class="legend-controls">
        <button 
          class="control-btn" 
          @click="clearHighlights"
          :disabled="highlightedTypes.length === 0"
        >
          清除高亮
        </button>
        <button 
          class="control-btn" 
          @click="highlightAll"
          :disabled="highlightedTypes.length === nodeTypes.length"
        >
          全部高亮
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { nodeTypeColors } from '../data/sailisiSampleData.js'

export default {
  name: 'NetworkLegend',
  props: {
    graphData: {
      type: Object,
      default: () => ({ nodes: [], edges: [] })
    },
    highlightedTypes: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isCollapsed: false,
      nodeTypeColors
    }
  },
  computed: {
    nodeCount() {
      return this.graphData.nodes ? this.graphData.nodes.length : 0
    },
    edgeCount() {
      return this.graphData.edges ? this.graphData.edges.length : 0
    },
    nodeTypes() {
      if (!this.graphData.nodes || this.graphData.nodes.length === 0) {
        return []
      }
      
      // 统计每种类型的节点数量
      const typeCounts = {}
      this.graphData.nodes.forEach(node => {
        const type = node.type || '未知'
        typeCounts[type] = (typeCounts[type] || 0) + 1
      })
      
      // 转换为数组并排序（按数量降序）
      return Object.entries(typeCounts)
        .map(([type, count]) => ({
          type,
          count,
          color: this.getTypeColor(type)
        }))
        .sort((a, b) => b.count - a.count)
    }
  },
  methods: {
    getTypeColor(type) {
      return this.nodeTypeColors[type] || '#95a5a6' // 默认灰色
    },
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
      this.$emit('legend-toggle', this.isCollapsed)
    },
    toggleHighlight(type) {
      this.$emit('type-highlight-toggle', type)
    },
    clearHighlights() {
      this.$emit('clear-highlights')
    },
    highlightAll() {
      const allTypes = this.nodeTypes.map(t => t.type)
      this.$emit('highlight-all', allTypes)
    },
    onTypeHover(type, isHover) {
      this.$emit('type-hover', { type, isHover })
    }
  }
}
</script>

<style scoped>
.network-legend {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 20px;
  width: 100%;
  transition: all 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.network-legend.collapsed {
  min-width: auto;
}

.legend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  user-select: none;
}

.legend-header:hover {
  background: rgba(0, 0, 0, 0.02);
}

.legend-title {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  gap: 8px;
}

.icon-legend::before {
  content: "🎨";
  font-size: 18px;
}

.collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: #7f8c8d;
  transition: all 0.2s ease;
}

.collapse-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #2c3e50;
}

.collapse-btn.rotated svg {
  transform: rotate(180deg);
}

.collapse-btn svg {
  transition: transform 0.3s ease;
}

.legend-content {
  padding: 0 20px 16px;
}

.legend-stats {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.stats-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.stats-item:last-child {
  margin-bottom: 0;
}

.stats-label {
  font-size: 13px;
  color: #7f8c8d;
}

.stats-value {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

.legend-items {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.legend-items::-webkit-scrollbar {
  width: 4px;
}

.legend-items::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

.legend-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.legend-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 12px;
}

.legend-item:hover {
  background: rgba(0, 0, 0, 0.04);
  transform: translateX(2px);
}

.legend-item.highlighted {
  background: rgba(52, 152, 219, 0.1);
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.legend-item.dimmed {
  opacity: 0.4;
}

.color-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.type-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.type-name {
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

.type-count {
  font-size: 12px;
  color: #7f8c8d;
}

.type-percentage {
  font-size: 12px;
  color: #95a5a6;
  font-weight: 500;
  min-width: 40px;
  text-align: right;
}

.legend-controls {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.control-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #7f8c8d;
}

.control-btn:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #3498db;
  color: #3498db;
}

.control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .network-legend {
    position: fixed;
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
    min-width: auto;
  }
  
  .legend-header {
    padding: 12px 16px;
  }
  
  .legend-content {
    padding: 0 16px 12px;
  }
  
  .legend-items {
    max-height: 300px;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .network-legend {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .legend-title {
    color: #ecf0f1;
  }
  
  .stats-label {
    color: #bdc3c7;
  }
  
  .stats-value {
    color: #ecf0f1;
  }
  
  .type-name {
    color: #ecf0f1;
  }
  
  .type-count {
    color: #95a5a6;
  }
  
  .control-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #bdc3c7;
  }
  
  .control-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #3498db;
  }
}
</style>
